<template>
    <div>
        <div @click="popup.openPopup" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <file-storage/>
            </n-icon>
            <Handle id="addFile-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>上传表格</span>
        <flow-popup-window
            :show="popup.show"
            :on-click-outside="popup.clickPopupOutside"
            :x="popup.x"
            :y="popup.y"
        >
            <n-card title="上传表格">
                <n-space vertical>
                    <div class="row">
                        <span class="">在线文件: </span>
                        <n-input
                            v-model:value="fileUrl"
                            placeholder="请输入在线文件url地址"
                        />
                        <n-button @click="getUrlFile">导入</n-button>
                    </div>
                    <n-upload
                        :action="app.ip+'perform_tasks/get_file'"
                        :headers="{token: user.getToken}"
                        @finish="handleFinish"
                        accept=".csv,.xlsx"
                    >
                        <div class="row">
                            <span>本地文件: </span>
                            <n-button>读取本地文件</n-button>
                        </div>
                    </n-upload>
                </n-space>
                <!--展示文件 已注释-->
                <n-data-table
                    :columns="props.data.data.title"
                    :data="props.data.data.data"
                    :pagination="pagination"
                    style="height: 300px"
                    flex-height
                />
            </n-card>
        </flow-popup-window>
    </div>
</template>

<script setup>
import {FileStorage} from "@vicons/carbon"
import {Handle, Position} from "@vue-flow/core";
import {useAppStore} from "@/stores/app";
import {useUserStore} from "@/stores/user";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";
import {NInput} from "naive-ui";
import workApi from "@/http/workApi";

const app = useAppStore()
const user = useUserStore()
const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'data'])

// 点击上传表格组件
const clickAddFile = () => {
    active.value = true
}
// 抽屉是否打开
const active = ref(false)
// 点击弹窗
const popup = reactive({
    show: false,
    x: null,
    y: null,
    clickPopupOutside: () => {
        popup.closedPopup()
    },
    openPopup: (e) => {
        popup.x = e.x
        popup.y = e.y
        popup.show = true
    },
    closedPopup: () => {
        popup.show = false
    }
})

// 后端读取读取文件结束
const handleFinish = ({event}) => {
    // 后端读取读取文件结束
    const response = JSON.parse(event.currentTarget.response)
    props.data.data = response.data
    // addModifiable()
    window.$message[response.tip.type](response.tip.info)
}
const fileUrl = ref("")
const getUrlFile = () => {
    workApi.post("perform_tasks/get_file_url", {
        url: fileUrl.value
    }).then(r => {
        props.data.data = r.data
        // addModifiable()
        window.$message[response.tip.type](response.tip.info)
    })
}
/**
 * 对数据添加可修改
 */
const addModifiable = ()=>{
    props.data.data.title.map(s => {
        s.render = (row, index) => {
            return h(NInput, {
                value: row[s['key']],
                onUpdateValue(v) {
                    props.data.data.data[index][s['key']] = v;
                }
            });
        }
        return s
    })
}
// 单页数据量
const pagination = {
    pageSize: 10
}

</script>

<style scoped lang="less">
.n-card {
    width: 900px;

    .row {
        display: flex;
        align-items: center;
        margin: 10px 0;

        > span {
            margin-right: 20px;
        }
    }

    .n-input {
        width: 500px;
    }
}
</style>